<template>
  <div>
    <!-- 表格编辑表单  :validate-event="false"-->
    <el-dialog :title="dialogtitle" :visible.sync="tableAdd_visible" width="50%" :before-close="tableClose">
      <el-form ref="addFormRef" :model="addForm" label-width="100px" :rules="addFormRules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="检测名称" prop="name">
              <el-input v-model="addForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测编号" prop="number">
              <el-input v-model="addForm.number"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="effectiveDateBegin">
              <el-date-picker :picker-options="pickerOptions" v-model="addForm.effectiveDateBegin" type="datetime"
                format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="effectiveDateEnd">
              <el-date-picker :picker-options="pickerOptions" v-model="addForm.effectiveDateEnd" type="datetime"
                format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="检测机构" prop="inspectionOrganization">
              <el-input v-model="addForm.inspectionOrganization"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测员" prop="inspector">
              <el-input v-model="addForm.inspector"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否合格" prop="isQualified">
              <el-select v-model="addForm.isQualified" placeholder="请选择">
                  <el-option
                    v-for="item in qualifiedOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测依据" prop="detectionPrinciple">
              <el-input v-model="addForm.detectionPrinciple"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="检测类型" prop="type">
              <el-select v-model="addForm.type" placeholder="请选择">
                <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品所属企业" prop="enterprise">
              <el-input v-model="addForm.enterprise"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="检测报告书">
            <el-upload
              class="upload-demo"
              drag
              action="http://120.77.156.205:9610/file/upload"
              multiple
              :on-success="changePictureSuccess"
            >
              <i class="el-icon-upload"></i>
            </el-upload>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item>

            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item>
              <el-button type="primary" @click="addformOnSubmit">立即创建</el-button>
              <el-button @click="closeform">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  // 接口数据
  import {
    newReport
  } from "@/Api/productionmanage/TestReportManage"
  export default {
    name: 'ProductionInfoTableAddForm',
    props: {
      tableAdd_visible: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        // 表单内容
        addForm: {
          detectionPrinciple: "",
          effectiveDateBegin: "",
          effectiveDateEnd: "",
          enterprise: "",
          inspectionOrganization: "",
          inspector: "",
          name: "",
          type: "",
          number: "",
          picture: "",
          isQualified: ""
        },
        // 合格选择框
        qualifiedOptions: [{
          value: '1',
          label: '合格'
        }, {
          value: '0',
          label: '不合格'
        }],
        // 类型选择框
        typeOptions: [{
          value: '1',
          label: '型式检测'
        }, {
          value: '2',
          label: '出厂检测'
        }, {
          value: '3',
          label: '入场检测'
        }, {
          value: '4',
          label: '过程检测'
        }, {
          value: '5',
          label: '产品年检'
        }],
        // 表单规则
        addFormRules: {
          name: [{
            required: true,
            message: '请输入'
          }],
          number: [{
            required: true,
            message: '请输入编号"'
          }],
          effectiveDateBegin: [{
            required: true,
            message: '请选择开始时间'
          }],
          effectiveDateEnd: [{
            required: true,
            message: '请选择结束时间'
          }],
          inspectionOrganization: [{
            required: true,
            message: '请输入'
          }],
          inspector: [{
            required: true,
            message: '请输入'
          }],
          isQualified: [{
            required: true,
            message: '请选择'
          }],
          detectionPrinciple: [{
            required: true,
            message: '请输入'
          }],
          type: [{
            required: true,
            message: '请选择'
          }],
        },
        // 表单标题
        dialogtitle: "添加检测报告",
        // 日期时间选择器快捷按钮
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
      }
    },
    created() {

    },
    methods: {
      // 关闭编辑弹窗
      tableClose() {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.closeform();
          })
          .catch(_ => {});
      },
      // 编辑弹窗确定
      addformOnSubmit() {
        this.$refs["addFormRef"].validate(async (valid) => {
          if (valid) {
            console.log(this.addForm);
            const {
              data: res
            } = await newReport(this.addForm)
            if (res.statusCode === 20000) {
              this.closeform();
              this.$emit('getNewReport');
              return this.$message.success("新增检测报告成功");
            } else {
              console.log(res.message);
              return this.$message.error("新增检测报告失败");
            }
          } else {
            // console.log(res.message);
            return this.$message.error("请输入完整信息");
          }
        });
      },
      // 关闭编辑表单弹窗
      closeform() {
        // console.log(this.editform)
        var a = false;
        this.$emit("closeAddDialog", a);
        // if(this.showAddDialog==false){
        // 清空表单
        this.resetform();
        // }
      },
      changePictureSuccess(res) {
        let pic = JSON.parse(res.data);
        this.addForm.picture = pic.url;
      },
      resetform() {
        this.$nextTick(() => {
          this.$refs.addFormRef.resetFields();
        })
      },

    },
    watch: {
      //   formtype: {
      //     handler(newVal, oldVal) {
      //       if (newVal) {
      //         // console.log(newVal);
      //         // this.dialogtitleType = newVal

      //       }
      //       this.getDialogtitle();
      //     },
      //     immediate: true,
      //     deep: true
      //   },
      // },
    }
  }

</script>
<style>

</style>
